<template>
  <div class="upload-img-cover">
    <el-upload
        class="avatar-uploader"
        :action="props.action"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :limit="1"
      >
        <img v-if="userPic" :src="`/bkapi/uploads/`+userPic" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      <div>
        <span>我的头像</span>
        <p>
          支持 jpg、png、jpeg 格式大小 5M 以内的图片 
        </p>
      </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { genFileId } from 'element-plus'
import Service from '@/utils/axios'
import type { UploadFile, UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/es/components/message/style/css"; // 按需引入ElMessage样式失败，手动引入
import "element-plus/es/components/message-box/style/css";


// 从父组件获取参数
const props = defineProps({
  action: {
    type: String, // 数据类型
    required: true, // 必传
  },
  userPic: {
    type: String,
    required: true,
  }
})
// 向父组件传文件数据
const emit = defineEmits(['updateCover'])
// 向父组件传cover
const setCover = () => {
  let urlArr: string[] = [];
  // fileCover.value.forEach((el: any) => {
  //   urlArr.push(el.response.simpleUrl);
  // });
  emit('updateCover', urlArr[0]);
}
// 项目封面
const fileCover = ref(
  {
    name: 'default_svg.svg',
    url: '/bkapi/uploads/avatar/default_svg.svg',
    // http://127.0.0.1:3000\\
  })
// 上传的封面图片上限
const limitCover = ref(1)
// 上传的封面数量到上限后是否隐藏flag
const noneCoverBtn = ref(true)

const upload = ref<UploadInstance>()
// 文件超出限制时触发
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
// // 封面图片改动时触发
// function coverFileRemove() {
//   noneCoverBtn.value = fileCover.value.length + 1 >= limitCover.value;

//   // 封面数组变动，改变父组件值
//   setCover();
// }
// 项目封面上传
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
// const handleRemove = (file: any) => {
//   console.log(file)
//   fileCover.value.splice(0);
//   noneCoverBtn.value = false;
//   // 封面数组变动，改变父组件值
//   setCover();
//   // 向后端发送删除封面文件的请求
//   Service.post('/bkapi/api/', {
//     filename: file.response?.filename,
//     fileUrl: file.response?.fileUrl
//   }).then((res: any) => {
//     // console.info('res', res)
//     if (res.data?.status === 200) {
//       ElMessage({
//         showClose: true,
//         message: res.data?.data,
//         type: 'success',
//       })
//     } else {
//       ElMessage({
//         showClose: true,
//         message: res.data?.data,
//         type: 'error',
//       })
//     }

//   })
// }
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}
const handleDownload = (file: UploadFile) => {
  console.log(file)
}

const handleAvatarSuccess = (response: any, uploadFile: any) => {
  let url = response.simpleUrl;
  fileCover.value.url = '/bkapi/uploads/' + url;
  console.log('response',response)
  console.log('url',url)
  console.log('fileCover.value.url',fileCover.value.url)
}

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
  const isJPG = type.includes(rawFile.type);
  if (!isJPG) {
    ElMessage.error("图片格式错误!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

</script>

<style lang="less" scoped>
.upload-img-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 100px;
  }

  & > div {
    text-align: center;

    & > span {
      font-weight: 700;
    }
    & > p {
      color: #86909c;
      font-size: 12px;
    }
  }
}
</style>